'use strict';

import React, {Component} from 'react';
import QRCode from 'react-native-qrcode';

import {
    View,
    StyleSheet,
    TextInput
} from 'react-native';


interface Iprops{
    value: string,
    size?: number,
    bgColor?: string,
    fgColor?: string
}

const defaultProp = {
    size: 200,
    bgColor: 'black',
    fgColor: 'white'
}

class QRComponent extends Component<Iprops, any> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <QRCode value={this.props.value}
                    size={ this.props.size || defaultProp.size }
                    bgColor={this.props.bgColor || defaultProp.bgColor}
                    fgColor={this.props.fgColor || defaultProp.fgColor}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center'
    },

    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        margin: 10,
        borderRadius: 5,
        padding: 5,
    }
});

export default QRComponent;